<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>代理主页</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<style>
			.div-c-header {
				display:flex;
				padding: 0 30px;
				background-color:#f8f8f8;
				border-bottom:1px solid #e7e7e7;
			}
			.div-c-menuList {
				display:flex;
				width:100%;
			}
			.div-c-menuList > span {
				display:flex;
				padding:15px;
				cursor: pointer;
				align-items:center;
				color:#777;
			}
			.div-c-menuList > span:hover {
				background-color:rgb(231,231,231);
				color:#333;
			}
			.div-c-menuList span:last-child {
				margin-left:auto;
			}
			.span-c-triangleWrapper {
				position: relative;
				min-width:130px;
				justify-content:center;
			}
			.span-c-triangle {
				position: absolute;
				border:6px solid;
				width:0;
				height:0;
				border-color: #928e8e transparent transparent transparent;
				left:90%;
				transform:translateY(-50%);
				top:56%;
			}
			.span-c-agentUserName {
				margin-right:22px;
			}
			.ul-c-c-subMenu {
				display:none;
				position: absolute;
				background-color:white;
				border:1px solid rgb(196,196,196);
				width:100%;
				left:0;
				top:100%;
			}
			.span-c-triangleWrapper.active .ul-c-c-subMenu {
				display:block;
			}
			.span-c-triangleWrapper.active .ul-c-c-subMenu > li:hover {
				background-color:rgb(231,231,231);
			}
			.span-c-triangleWrapper.active .ul-c-c-subMenu > li {
				padding: 8px 16px;
			}
			.span-c-triangleWrapper.active .span-c-triangle {
				border-color: #333 transparent transparent transparent;
			}
			.table-c-detailInfo td {
				white-space: nowrap;
				text-align: right;
			}
			.table-c-detailInfo span[data-info] {
				margin-right:4px;
			}
			
			 .span-c-triangleWrapper{
		 	position: absolute;
		 	right: 40px;
		 }
		 
		 .div-c-menuList span.span-ys{
		 	position: absolute;
		 	right: 170px;
		 }
 table th, table tr, table td {
	text-align: center;
	vertical-align: middle;
}
		
		</style>
	</head>
	<body style="">
			<div style="display:flex;flex-direction:column;width:100vw;height:100vh;">
				<div class="div-c-header">
					<div class="div-c-menuList">
						<span data-name="userListPage">下级列表</span>
						<span data-name="gameRecordPage">游戏记录</span> 
						<span data-name="teamAccount">团队帐变</span>
						<span data-name="teamStatistics">团队统计</span>
						<span data-name="showSalesCommission">推广链接</span>
						<span data-name="withdrawalLog">取款日志</span>
						<span class="span-ys"><span class='online'>online</span><span class="number" id="online" style="margin-left:5px;border: 1px solid  #ddd;padding: 0px 8px;background: #ddd;border-radius: 50%;color: #000;">0</span></span>
						<span class="span-c-triangleWrapper"><span class='span-c-agentUserName'>${agent.username}</span><span class="span-c-triangle"></span>
							<ul class="ul-c-c-subMenu">
								<li id="li-i-accountInfo">账号信息</li>
<!-- 								<li>在线取款</li> -->
								<li id="li-i-editPassWord">修改密码</li>
								<li id="li-i-exitBtn" >退出</li>
							</ul>
						</span>
					</div>
				</div>
				<iframe style="flex-grow:1;" id="iframe-i-subSite" border="0" frameborder="no" width="100%" src="/userAgent/userListPage.do"></iframe>
			</div>
			
			
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   				
			
			
<!-- 模态框（Modal） -->
<div class="modal fade" id="myDetailInfo" role="dialog" aria-labelledby="myDetailInfo" aria-hidden="true">
    <div class="modal-dialog" style="width:800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">我的信息</h4>
            </div>
            <div class="modal-body">
            	<table class="table-c-detailInfo table table-striped table-bordered table-hover">
            		<tbody>
            			<tr>
            				<!-- <td>余额：</td>
            				<td style="text-align: left;"><span data-info="balance" style="color:red;">0.00</span>RMB</td> -->
            				<td>用户姓名：</td>
            				<td><input data-info="realName" readonly="readonly" value='' class="form-control" /></td>
            				<td>电话：</td>
            				<td><input data-info="phone" readonly="readonly" value='' class="form-control" /></td>
            			</tr>
            			<tr>
            				<td>QQ：</td>
            				<td><input data-info="qq" readonly="readonly" value='' class="form-control" /></td>
            				<td>邮箱：</td>
            				<td><input data-info="email" readonly="readonly" value='' class="form-control" /></td>
            			</tr>   
           			<!-- 	<tr>
            				
            				<td>取现银行：</td>
            				<td><input data-info="bankName" readonly="readonly" value='' class="form-control" /></td>
            			</tr> -->
            			<tr>
            				<td>银行账号：</td>
            				<td><input data-info="bankAccount" readonly="readonly" value='' class="form-control" /></td>
            				<td>银行地址：</td>
            				<td><input data-info="bankAddress" readonly="readonly" value='' class="form-control" /></td>
            			</tr>      
            		</tbody>
            	</table>
            </div>
            <div class="modal-footer" style="text-align: center;">
                <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->		

<!-- 模态框（Modal） -->
<div class="modal fade" id="editPassWordInfo" role="dialog" aria-labelledby="editPassWordInfo" aria-hidden="true">
    <div class="modal-dialog" style="width:600px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">修改密码</h4>
            </div>
            <form>
            <div class="modal-body">
            	<table class="table-c-detailInfo table table-striped table-bordered table-hover">
            		<tbody>
            			<tr>
            				<td>用户名：</td>
            				<td><input readonly="readonly" value='${agent.username}' class="form-control" /></td>
            			</tr>
            			<tr>
            				<td>旧密码：</td>
            				<td><input id="input-i-oldPass" type='password' value='' class="form-control" /></td>
            			</tr>   
           				<tr>
            				<td>新密码：</td>
            				<td><input id="input-i-newPass" type='password' value='' class="form-control" /></td>
            			</tr>
            			<tr>
            				<td>确认密码：</td>
            				<td><input id="input-i-newPassRepeat" type='password' value='' class="form-control" /></td>
            			</tr>              			         			
            		</tbody>
            	</table>
            </div>
            </form>
            <div class="modal-footer" style="text-align: center;">
            	<button type="button" class="btn btn-primary btn-lg" id="button-i-confirmEditPassWord">确认修改</button>
                <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->	




<div class="modal fade" id="allNextLevelModal" tabindex="-1" role="dialog" aria-labelledby="allNextLevelModal" aria-hidden="true" style="z-index:1050;">
    <div class="modal-dialog class-fake-alert" style="width:1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" >
            		<table id="table-i-dailiList"  class="table table-striped table-bordered table-hover">
            			<thead>
            				<tr>
            					<th>用户名称</th>
            					<th>账号余额</th>
            					<th>注册时间</th>
            					<th>登录时间</th>
            				</tr>
            			</thead>
            			<tbody>
            			</tbody>
            		</table>
            </div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>  
			
			<script>
				
				$.ajax({
					url:"/userAgent/online.do",
					type: "post",
					data: {},
					success: function(data) {
						$("#online").text(data.data.length)
					}
				})		
			
			$("#table-i-dailiList").DataTable({
		      "bLengthChange": true,      
		      "bAutoWidth": false,
		      "bSort": false,
		      "dom": `t<"tableToolBar" p<"lengthWrapper" l>i>`,
		      'aLengthMenu':[5, 10, 20],
		       //"order": [[ 9, "asc" ]],  
		       "searching": true,  
		       "language": {//语言设置  
		            "lengthMenu": "每页显示 _MENU_ 条记录",     
		            "zeroRecords": "没有检索到数据",     
		            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
		            "info": "没有数据",     
		            "oPaginate": {     
		                "sFirst": "首页",     
		                "sPrevious": "前一页",     
		                "sNext": "后一页",     
		                "sLast": "尾页"    
		          	},
		            "search":"搜索:",
		            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
		            "infoEmpty":      "没有找到匹配的信息",
		         }, 
		         "columns": [
		                     { "data": "name" ,"className":"name-td" },
		                     { "data": "balance" },
		                     { "data": "createtime"},
		                     { "data": "lastTime"},
		                     { "data": "id", "className": "td-c-id hidden-td"},
		                    
		                   ],	 
			      "ajax": {
		    	  	  "type": 'post',
		    	      "url":"/userAgent/online.do"
			      },	
		       })
				$(".online").on("click",function(){
					$("#allNextLevelModal").modal("show")
					 $("#table-i-dailiList").DataTable().ajax.url("/userAgent/online.do").load()
				})
	
				var bindUlSubHoverEvent = function() {
					$(".span-c-triangleWrapper").on("mouseover", function(event) {
						var $self = $(event.currentTarget)
						$self.addClass("active")
					})
					$(".span-c-triangleWrapper").on("mouseleave", function(event) {
						var $self = $(event.currentTarget)
						$self.removeClass("active")
					})					
				}
				var bindSpanSelectIframe = function() {
					$(".div-c-menuList [data-name]").on("click", function(event) {
						var name = event.currentTarget.dataset.name
						$("#iframe-i-subSite").prop("src","/userAgent/"+ name + ".do")
					})
				}
				
				var bindAccountInfoEvent = function() {
					$("#li-i-accountInfo").on("click", function(event) {
						var newRequest = {
								url: "/userAgent/agentInfo.do",
								type: "post",
								data: {
								},
								success: function(data) {
									var newData = JSON.parse(data)
									$(".table-c-detailInfo [data-info]").each(function(index, element) {
										var dataValue = newData.data[element.dataset.info]
										if (element.tagName == "INPUT") {
											element.value = dataValue
										}
										else if (element.tagName == "SPAN") {
											element.textContent = dataValue
										}
									})
									$("#myDetailInfo").modal("show")
								},
								error: function(status) {
									showNoticeModal("网络异常，请稍后重试")
								}
							}
							ajax(newRequest)							
					})
				}
				
				var bindEditPassWordEvent = function() {
					$("#li-i-editPassWord").on("click", function(event) {
						$("#editPassWordInfo").modal("show")
					})			
					$("#button-i-confirmEditPassWord").on("click", function(event) {
						//checkPassWordValid
						var oldPass = $("#input-i-oldPass").val()
						var newPass = $("#input-i-newPass").val()
						var newPassRepeat = $("#input-i-newPassRepeat").val()
						if (!oldPass) {
							showNoticeModal("无效的旧密码")
							return
						}
						if (!newPass) {
							showNoticeModal("无效的新密码")
							return
						}
						if (!newPassRepeat) {
							showNoticeModal("无效的确认密码")
							return
						}	
						if (newPass != newPassRepeat) {
							showNoticeModal("两次新密码输入不一致")
							return							
						}
						var isPassValid = checkPassWordValid(newPassRepeat)
						if (isPassValid != "ok") {
							showNoticeModal("密码必须大于6位且小于15位，只能包含数字或字母")
							return							
						}
						var newRequest = {
							url: "/userAgent/editAgent.do",
							type: "post",
							data: {
								oldPassword: oldPass,
								newPassword: newPassRepeat,
							},
							success: function(data) {
								var newData = JSON.parse(data)
								if (newData.data != "1") {
									showNoticeModal(newData.message)
									return
								}
								showNoticeModal("修改密码成功")
								$("#editPassWordInfo").modal("hide")
							},
							error: function(status) {
								showNoticeModal("网络异常，请稍后重试")
							}
						}
						ajax(newRequest)							
					})
				}
				
				$('#editPassWordInfo').on('hidden.bs.modal', function () {
				   $("#editPassWordInfo form")[0].reset()
				})
				
				var bindExitEvent = function() {
					$("#li-i-exitBtn").on("click", function() {
						location.href = "/userAgent/logOut.do"
					})
				}
				
				var __main = function() {
					bindUlSubHoverEvent()
					bindSpanSelectIframe()
					bindAccountInfoEvent()
					bindEditPassWordEvent()
					bindExitEvent()
				}
				
				__main()
				
				setInterval(function() {
					$.ajax({
						url:"/userAgent/online.do",
						type: "post",
						data: {},
						success: function(data) {
							$("#online").text(data.data.length)
						}
					})		
	 			}, 10000) 
			</script>
	</body>
	<script>
	</script>
</html>
